<template>
	<view id="professionalNew">
		<view class="ibody">
			<view class="top">
				<view class="banner">
					<view class="shixin">
						<image mode="widthFix" src="@/static/images/banner/shixin.png" alt="">
					</view>
					<view class="bgsl" @click="$tab.navigateTo('/pages/bdp')">
						<image mode="widthFix" src="@/static/images/banner/bgsl.png" alt="">
					</view>
					<view class="flex">
						<view class="fx">
							<image mode="widthFix" src="@/static/images/banner/fx.png" alt="">
						</view>
						<view class="search">
							<image mode="widthFix" src="@/static/images/banner/search.png" alt="">
						</view>
					</view>
					<view class="laba flex">
						<view class="img">
							<image mode="widthFix" src="@/static/images/banner/laba.png" alt="">
						</view>
						<view class="text">
							{{laba}}
						</view>
					</view>
				</view>
				<view style="margin: 0 10px 10px;">
					<keyword :userId="userId" :productId="1" />
				</view>
			</view>
			<view class="explain">
				<view class="tit">
					1分钟检测失信风险
				</view>
				<view class="icon">
					<view class="flex">
						<view>
							<view class="img"><img src="@/static/images/icon/1.png" alt="" /></view>
							<view class="text">失信被执行</view>
						</view>
						<view>
							<view class="img"><img src="@/static/images/icon/2.png" alt="" /></view>
							<view class="text">司法涉诉风险</view>
						</view>
						<view>
							<view class="img"><img src="@/static/images/icon/3.png" alt="" /></view>
							<view class="text">行政处罚风险</view>
						</view>
						<view>
							<view class="img"><img src="@/static/images/icon/4.png" alt="" /></view>
							<view class="text">黑名单风险</view>
						</view>
						<view>
							<view class="img"><img src="@/static/images/icon/5.png" alt="" /></view>
							<view class="text">失信风险检测</view>
						</view>
						<view>
							<view class="img"><img src="@/static/images/icon/6.png" alt="" /></view>
							<view class="text">行为风险扫描</view>
						</view>
					</view>
				</view>
			</view>

			<view class="explain">
				<view class="tit">
					为什么选择信鸟查
				</view>
				<view class="list">
					<view class="flex">
						<view class="flex">
							<view class="img"><img src="@/static/images/icon/7.png" alt="" /></view>
							<view class="text">
								<view class="">急速查询</view>
								<view class="">一件生成报告</view>
							</view>
						</view>
						<view class="flex">
							<view class="img"><img src="@/static/images/icon/8.png" alt="" /></view>
							<view class="text">
								<view class="">隐私安全</view>
								<view class="">采用RSA等加密方式</view>
							</view>
						</view>
						<view class="flex">
							<view class="img"><img src="@/static/images/icon/9.png" alt="" /></view>
							<view class="text">
								<view class="">多维数据</view>
								<view class="">100+项模块数据</view>
							</view>
						</view>
						<view class="flex">
							<view class="img"><img src="@/static/images/icon/10.png" alt="" /></view>
							<view class="text">
								<view class="">解读建议</view>
								<view class="">专业解读个人失信信息</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="buyer">
				<view class="wrap">
					<view class="tit">
						听听买过的人怎么说？
					</view>
					<view class="info">
						<view class="box">
							<view class="flex">
								<view class="head">
									<img src="@/static/images/header/1.png" alt="">
								</view>
								<view class="text">
									<view class="name">
										Kenny
									</view>
									<view class="">
										报告很全很详细，了解自己的风险情况
									</view>
								</view>
							</view>
							<view class="flex">
								<view class="head">
									<img src="@/static/images/header/2.png" alt="">
								</view>
								<view class="text">
									<view class="name">
										老铁
									</view>
									<view class="">
										幸好查了一下，自己居然有黑名单风险
									</view>
								</view>
							</view>
							<view class="flex">
								<view class="head">
									<img src="@/static/images/header/3.png" alt="">
								</view>
								<view class="text">
									<view class="name">
										九环
									</view>
									<view class="">
										真心劝大家都查一下，排查自身风险很有必要
									</view>
								</view>
							</view>
							<view class="flex">
								<view class="head">
									<img src="@/static/images/header/4.png" alt="">
								</view>
								<view class="text">
									<view class="name">
										宣平
									</view>
									<view class="">
										很方表就查到自己的报告，有两项风险
									</view>
								</view>
							</view>

						</view>
						<view class="box">
							<view class="flex">
								<view class="head">
									<img src="@/static/images/header/5.png" alt="">
								</view>
								<view class="text">
									<view class="name">
										纳尔哒哒
									</view>
									<view class="">
										报告很全很详细，了解自己的风险情况
									</view>
								</view>
							</view>
							<view class="flex">
								<view class="head">
									<img src="@/static/images/header/6.png" alt="">
								</view>
								<view class="text">
									<view class="name">
										王多鱼
									</view>
									<view class="">
										幸好查了一下，自己居然有黑名单风险
									</view>
								</view>
							</view>
							<view class="flex">
								<view class="head">
									<img src="@/static/images/header/7.png" alt="">
								</view>
								<view class="text">
									<view class="name">
										花开半夏
									</view>
									<view class="">
										真心劝大家都查一下，排查自身风险很有必要
									</view>
								</view>
							</view>
							<view class="flex">
								<view class="head">
									<img src="@/static/images/header/1.png" alt="">
								</view>
								<view class="text">
									<view class="name">
										漾
									</view>
									<view class="">
										很方表就查到自己的报告，有两项风险
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="shuoming">
				<view class="text-center bq">石家庄火微科技有限公司 版权所有</view>
				<view class="text-center bq">
					"信鸟查"严格按照相关法律法规及监管单位的操作要求，合法合规经营，所有报告数据均由第三方合规公司、机构提供，不获取用户本地隐私数据，若您对查询数据结果有异议，可联系客服发起异议处理。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import keyword from '@/components/keyword.vue'

	export default {
		components: {
			keyword
		},
		data() {
			return {
				list: [
					'5秒前用户购买成功，及时了解大数据风险。',
					'10秒前用户购买成功，及时了解大数据风险。',
					'15秒前用户购买成功，及时了解大数据风险。',
					'1分钟前用户购买成功，及时了解大数据风险。',
					'2分钟前用户购买成功，及时了解大数据风险。',
					'3分钟前用户购买成功，及时了解大数据风险。',
				],
				listTimer: undefined,
				laba: '',
				userId: undefined
			}
		},
		onLoad(event) {
			// 若不来自推荐，算作管理员的
			this.userId = event.ui ? event.ui : 1
		},
		created() {
			this.notice()
		},
		methods: {
			notice() {
				clearTimeout(this.listTimer)
				const a = Math.round(Math.random() * 6)
				this.laba = this.list[a]
				this.listTimer = setTimeout(() => {
					this.notice()
				}, 3000)
			}

		}
	}
</script>

<style lang="scss">
	#professionalNew {
		width: 100%;
		background-color: #F5F5F5;
		position: relative;

		.text-center {
			color: #F5F5F5;
		}

		.ibody {
			background-color: #5e17eb;

			.top {
				.banner {
					text-align: center;
					padding: 20px 10px 0;
					border-radius: 5px;
					height: 230px;
					position: relative;

					.shixin {
						width: 60vw;
					}

					.bgsl {
						position: absolute;
						right: 19vw;
						top: 15px;
						width: 86px;
					}

					.flex {
						padding-left: 10px;

						.fx {
							width: calc(100% - 133px);
						}

						.search {
							width: 133px;
							position: relative;
							top: -20px;
						}

					}

					.laba {
						.img {
							width: 20px;
							margin-right: 10px;
						}

						color: #fff;
					}

					img {
						width: 100%;
					}

				}

			}

			.explain {
				margin: 0 10px 10px;
				background-color: #fff;
				border-radius: 10px;
				padding: 25px 10px;
				box-shadow: 0px 0px 10px 0px #ccc;

				.tit {
					text-align: center;
					font-size: 20px;
					color: #000;
					line-height: 28px;
					margin-bottom: 17px;
					font-weight: 600;
				}

				.icon {
					margin-bottom: 17px;

					.flex {
						justify-content: start;
						flex-wrap: wrap;

						>view {
							width: 33%;
							text-align: center;
							font-size: 16px;
							color: #000;
							margin-bottom: 20px;
						}

						.img {
							width: 51px;
							height: 51px;
							margin: 0 auto 5px;

							img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.flex:last-child {
						margin-top: 15px;
					}
				}

				.list {
					>.flex {
						flex-wrap: wrap;
						justify-content: space-around;

						>.flex {
							margin-bottom: 20px;
							width: 45%;

							.img {
								margin-right: 10px;
								width: 52px;
								height: 52px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.text {
								font-size: 12px;
								color: #aaa;

								view:first-child {
									font-size: 16px;
									color: #000;
								}
							}
						}
					}
				}
			}

			.buyer {
				background-color: #5e17eb;
				// padding: 15px;
				margin: 0 10px 10px;

				.wrap {
					padding: 15px;
					background-color: #fff;
					border-radius: 5px;

					.tit {
						text-align: center;
						font-size: 20px;
						color: #000;
						line-height: 28px;
						margin-bottom: 17px;
						font-weight: 600;
					}

					.info {
						overflow: hidden;
						height: 292px;

						.box {
							overflow: hidden;
							position: relative;
							animation: mymove 6s linear infinite normal;
							-webkit-animation: mymove 6s linear infinite normal;

							.flex {

								padding: 0 0 0 10px;
								margin-bottom: 20px;

								.head {
									width: 53px;
									height: 53px;
									margin-right: 20px;

									img {
										width: 100%;
										border-radius: 50%;
										height: 100%;
									}
								}

								.text {
									font-size: 12px;
									color: #aaa;

									.name {
										font-size: 16px;
										color: #000;
									}
								}
							}
						}
					}
				}
			}

			.shuoming {
				background-color: #5e17eb;
				padding: 30px 15px;
				color: #999;

				.bq {
					color: #fff;
					margin-bottom: 30px;
				}
			}
		}
	}
</style>